<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标准化申报系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        :root {
            --primary: #1a6bc4;
            --primary-dark: #0d4d8c;
            --secondary: #f8f9fa;
            --accent: #28a745;
            --warning: #ffc107;
            --danger: #dc3545;
            --text: #333;
            --text-light: #6c757d;
            --border: #dee2e6;
            --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        body {
            background-color: #f5f7fa;
            color: var(--text);
            line-height: 1.6;
        }
        
        .container {
            display: flex;
            min-height: 100vh;
        }
        
        /* 侧边导航 */
        .sidebar {
            width: 240px;
            background: linear-gradient(to bottom, var(--primary), var(--primary-dark));
            color: white;
            padding: 20px 0;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .logo {
            display: flex;
            align-items: center;
            padding: 0 20px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 20px;
        }
        
        .logo i {
            font-size: 28px;
            margin-right: 10px;
        }
        
        .logo h1 {
            font-size: 20px;
            font-weight: 600;
        }
        
        .nav-menu {
            list-style: none;
        }
        
        .nav-item {
            padding: 12px 20px;
            transition: all 0.3s;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        
        .nav-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .nav-item.active {
            background-color: rgba(255, 255, 255, 0.2);
            border-left: 4px solid white;
        }
        
        .nav-item i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }
        
        /* 主内容区 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background-color: white;
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .search-box {
            display: flex;
            align-items: center;
            background-color: #f5f7fa;
            border-radius: 4px;
            padding: 8px 12px;
            width: 300px;
        }
        
        .search-box i {
            color: var(--text-light);
            margin-right: 8px;
        }
        
        .search-box input {
            border: none;
            background: transparent;
            outline: none;
            width: 100%;
        }
        
        .user-info {
            display: flex;
            align-items: center;
        }
        
        .user-info img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
            object-fit: cover;
        }
        
        .content {
            padding: 30px;
            flex: 1;
            overflow-y: auto;
        }
        
        .page-title {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .page-title h2 {
            font-size: 24px;
            font-weight: 600;
            color: var(--primary);
        }
        
        /* 卡片布局 */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }
        
        .card-header {
            padding: 15px 20px;
            background-color: var(--primary);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .card-header h3 {
            font-size: 18px;
            font-weight: 500;
        }
        
        .card-body {
            padding: 20px;
        }
        
        .stat-number {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--primary);
        }
        
        .stat-desc {
            color: var(--text-light);
            font-size: 14px;
        }
        
        .task-list {
            list-style: none;
        }
        
        .task-item {
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .task-item:last-child {
            border-bottom: none;
        }
        
        .task-info {
            display: flex;
            align-items: center;
        }
        
        .task-info i {
            margin-right: 10px;
            color: var(--primary);
        }
        
        .task-status {
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-pending {
            background-color: #fff3cd;
            color: #856404;
        }
        
        .status-approved {
            background-color: #d1ecf1;
            color: #0c5460;
        }
        
        .status-rejected {
            background-color: #f8d7da;
            color: #721c24;
        }
        
        .status-in-progress {
            background-color: #d1ecf1;
            color: #0c5460;
        }
        
        .btn {
            display: inline-block;
            padding: 8px 16px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
            text-decoration: none;
        }
        
        .btn:hover {
            background-color: var(--primary-dark);
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
        }
        
        .btn-outline:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-success {
            background-color: var(--accent);
        }
        
        .btn-success:hover {
            background-color: #218838;
        }
        
        .btn-warning {
            background-color: var(--warning);
            color: #212529;
        }
        
        .btn-warning:hover {
            background-color: #e0a800;
        }
        
        .module-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .module-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            padding: 25px;
            text-align: center;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .module-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }
        
        .module-icon {
            font-size: 40px;
            color: var(--primary);
            margin-bottom: 15px;
        }
        
        .module-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .module-desc {
            color: var(--text-light);
            font-size: 14px;
        }
        
        /* 表格样式 */
        .table-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            overflow: hidden;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid var(--border);
        }
        
        th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: var(--text);
        }
        
        tr:hover {
            background-color: #f8f9fa;
        }
        
        .action-buttons {
            display: flex;
            gap: 8px;
        }
        
        .action-btn {
            padding: 4px 8px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .action-view {
            background-color: #e7f3ff;
            color: var(--primary);
        }
        
        .action-edit {
            background-color: #fff3cd;
            color: #856404;
        }
        
        .action-delete {
            background-color: #f8d7da;
            color: #721c24;
        }
        
        /* 表单样式 */
        .form-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--card-shadow);
            padding: 25px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 4px;
            font-size: 14px;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(26, 107, 196, 0.2);
        }
        
        .form-row {
            display: flex;
            gap: 20px;
        }
        
        .form-col {
            flex: 1;
        }
        
        /* 分页 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 5px;
        }
        
        .page-item {
            padding: 8px 12px;
            border: 1px solid var(--border);
            border-radius: 4px;
            cursor: pointer;
        }
        
        .page-item.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 流程步骤 */
        .process-steps {
            display: flex;
            margin-bottom: 30px;
            position: relative;
        }
        
        .process-step {
            flex: 1;
            text-align: center;
            position: relative;
            padding: 15px 0;
        }
        
        .step-number {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #e9ecef;
            color: var(--text-light);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-weight: 600;
        }
        
        .process-step.active .step-number {
            background-color: var(--primary);
            color: white;
        }
        
        .process-step.completed .step-number {
            background-color: var(--accent);
            color: white;
        }
        
        .step-title {
            font-size: 14px;
            font-weight: 500;
        }
        
        .process-steps::before {
            content: '';
            position: absolute;
            top: 45px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #e9ecef;
            z-index: 1;
        }
        
        /* 选项卡 */
        .tabs {
            display: flex;
            border-bottom: 1px solid var(--border);
            margin-bottom: 20px;
        }
        
        .tab {
            padding: 12px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }
        
        .tab.active {
            border-bottom-color: var(--primary);
            color: var(--primary);
            font-weight: 500;
        }
        
        /* 隐藏页面内容 */
        .page-content {
            display: none;
        }
        
        .page-content.active {
            display: block;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                height: auto;
            }
            
            .card-grid {
                grid-template-columns: 1fr;
            }
            
            .form-row {
                flex-direction: column;
                gap: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 侧边导航 -->
        <div class="sidebar">
            <div class="logo">
                <i class="fas fa-file-alt"></i>
                <h1>标准化申报系统</h1>
            </div>
            <ul class="nav-menu">
                <li class="nav-item active" data-page="dashboard">
                    <i class="fas fa-home"></i>
                    <span>工作台</span>
                </li>
                <li class="nav-item" data-page="local-standard">
                    <i class="fas fa-file-signature"></i>
                    <span>地方标准申报</span>
                </li>
                <li class="nav-item" data-page="pilot-project">
                    <i class="fas fa-project-diagram"></i>
                    <span>标准化试点项目</span>
                </li>
                <li class="nav-item" data-page="committee">
                    <i class="fas fa-users"></i>
                    <span>标准化委员会</span>
                </li>
                <li class="nav-item" data-page="expert">
                    <i class="fas fa-user-tie"></i>
                    <span>专家管理</span>
                </li>
                <li class="nav-item" data-page="statistics">
                    <i class="fas fa-chart-bar"></i>
                    <span>数据统计</span>
                </li>
                <li class="nav-item" data-page="system">
                    <i class="fas fa-cog"></i>
                    <span>系统管理</span>
                </li>
            </ul>
        </div>
        
        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 顶部栏 -->
            <div class="header">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" placeholder="搜索...">
                </div>
                <div class="user-info">
                    <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" alt="用户头像">
                    <span>张管理员</span>
                    <i class="fas fa-chevron-down" style="margin-left: 10px;"></i>
                </div>
            </div>
            
            <!-- 工作台页面 -->
            <div class="content page-content active" id="dashboard">
                <div class="page-title">
                    <h2>工作台</h2>
                    <div class="date">2025年3月31日 星期一</div>
                </div>
                
                <!-- 统计卡片 -->
                <div class="card-grid">
                    <div class="card">
                        <div class="card-header">
                            <h3>待办事项</h3>
                            <i class="fas fa-tasks"></i>
                        </div>
                        <div class="card-body">
                            <div class="stat-number">12</div>
                            <div class="stat-desc">需要您处理的申请</div>
                            <a href="#" class="btn" style="margin-top: 15px;">查看详情</a>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h3>地方标准申报</h3>
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <div class="card-body">
                            <div class="stat-number">8</div>
                            <div class="stat-desc">进行中的申报流程</div>
                            <a href="#" class="btn" style="margin-top: 15px;">查看详情</a>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h3>试点项目</h3>
                            <i class="fas fa-project-diagram"></i>
                        </div>
                        <div class="card-body">
                            <div class="stat-number">5</div>
                            <div class="stat-desc">省级和国家级项目</div>
                            <a href="#" class="btn" style="margin-top: 15px;">查看详情</a>
                        </div>
                    </div>
                </div>
                
                <!-- 待办事项列表 -->
                <div class="card">
                    <div class="card-header">
                        <h3>我的待办</h3>
                        <i class="fas fa-list"></i>
                    </div>
                    <div class="card-body">
                        <ul class="task-list">
                            <li class="task-item">
                                <div class="task-info">
                                    <i class="fas fa-file-medical"></i>
                                    <span>地方标准立项申请 - 智慧城市数据规范</span>
                                </div>
                                <span class="task-status status-pending">待审核</span>
                            </li>
                            <li class="task-item">
                                <div class="task-info">
                                    <i class="fas fa-clipboard-check"></i>
                                    <span>省级试点项目验收 - 智能制造标准化</span>
                                </div>
                                <span class="task-status status-approved">已通过</span>
                            </li>
                            <li class="task-item">
                                <div class="task-info">
                                    <i class="fas fa-user-plus"></i>
                                    <span>专家入库申请 - 李明教授</span>
                                </div>
                                <span class="task-status status-pending">待审核</span>
                            </li>
                            <li class="task-item">
                                <div class="task-info">
                                    <i class="fas fa-file-contract"></i>
                                    <span>标准化委员会变更申请</span>
                                </div>
                                <span class="task-status status-rejected">需修改</span>
                            </li>
                            <li class="task-item">
                                <div class="task-info">
                                    <i class="fas fa-chart-line"></i>
                                    <span>2025年第一季度标准化数据统计</span>
                                </div>
                                <span class="task-status status-pending">待提交</span>
                            </li>
                        </ul>
                    </div>
                </div>
                
                <!-- 功能模块 -->
                <div class="page-title" style="margin-top: 30px;">
                    <h2>功能模块</h2>
                </div>
                
                <div class="module-grid">
                    <div class="module-card" data-page="local-standard">
                        <div class="module-icon">
                            <i class="fas fa-file-signature"></i>
                        </div>
                        <div class="module-title">地方标准申报</div>
                        <div class="module-desc">立项、征求意见、送审报批、复审全流程管理</div>
                    </div>
                    
                    <div class="module-card" data-page="pilot-project">
                        <div class="module-icon">
                            <i class="fas fa-project-diagram"></i>
                        </div>
                        <div class="module-title">标准化试点项目</div>
                        <div class="module-desc">省级和国家级试点项目管理</div>
                    </div>
                    
                    <div class="module-card" data-page="committee">
                        <div class="module-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="module-title">标准化委员会</div>
                        <div class="module-desc">委员会申报、审批和管理</div>
                    </div>
                    
                    <div class="module-card" data-page="expert">
                        <div class="module-icon">
                            <i class="fas fa-user-tie"></i>
                        </div>
                        <div class="module-title">专家管理</div>
                        <div class="module-desc">专家入库、审核和任务分配</div>
                    </div>
                    
                    <div class="module-card" data-page="statistics">
                        <div class="module-icon">
                            <i class="fas fa-chart-bar"></i>
                        </div>
                        <div class="module-title">数据统计</div>
                        <div class="module-desc">各类标准化数据查询与分析</div>
                    </div>
                    
                    <div class="module-card" data-page="system">
                        <div class="module-icon">
                            <i class="fas fa-cog"></i>
                        </div>
                        <div class="module-title">系统管理</div>
                        <div class="module-desc">用户、权限和系统配置</div>
                    </div>
                </div>
            </div>
            
            <!-- 地方标准申报页面 -->
            <div class="content page-content" id="local-standard">
                <div class="page-title">
                    <h2>地方标准申报</h2>
                    <button class="btn btn-success"><i class="fas fa-plus"></i> 新建申报</button>
                </div>
                
                <div class="tabs">
                    <div class="tab active" data-tab="application">立项申报</div>
                    <div class="tab" data-tab="review">征求意见</div>
                    <div class="tab" data-tab="approval">送审报批</div>
                    <div class="tab" data-tab="recheck">复审管理</div>
                </div>
                
                <div class="tab-content active" data-tab="application">
                    <div class="card">
                        <div class="card-header">
                            <h3>立项申报列表</h3>
                            <div class="action-buttons">
                                <button class="btn btn-outline"><i class="fas fa-filter"></i> 筛选</button>
                                <button class="btn btn-outline"><i class="fas fa-download"></i> 导出</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>申报编号</th>
                                            <th>标准名称</th>
                                            <th>申报单位</th>
                                            <th>申报日期</th>
                                            <th>当前状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>DB202503001</td>
                                            <td>智慧城市数据规范</td>
                                            <td>南京市大数据管理局</td>
                                            <td>2025-03-15</td>
                                            <td><span class="task-status status-pending">形式审查</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>DB202503002</td>
                                            <td>智能制造评价指南</td>
                                            <td>江苏省工业和信息化厅</td>
                                            <td>2025-03-18</td>
                                            <td><span class="task-status status-in-progress">标委会审核</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>DB202503003</td>
                                            <td>绿色建筑评价标准</td>
                                            <td>江苏省住房和城乡建设厅</td>
                                            <td>2025-03-20</td>
                                            <td><span class="task-status status-approved">审核通过</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="pagination">
                                <div class="page-item active">1</div>
                                <div class="page-item">2</div>
                                <div class="page-item">3</div>
                                <div class="page-item">...</div>
                                <div class="page-item">10</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="tab-content" data-tab="review">
                    <div class="card">
                        <div class="card-header">
                            <h3>征求意见列表</h3>
                        </div>
                        <div class="card-body">
                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>标准编号</th>
                                            <th>标准名称</th>
                                            <th>起草单位</th>
                                            <th>征求意见开始日期</th>
                                            <th>征求意见结束日期</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>DB202503001</td>
                                            <td>智慧城市数据规范</td>
                                            <td>南京市大数据管理局</td>
                                            <td>2025-03-25</td>
                                            <td>2025-04-25</td>
                                            <td><span class="task-status status-in-progress">进行中</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>DB202502015</td>
                                            <td>数字乡村建设指南</td>
                                            <td>江苏省农业农村厅</td>
                                            <td>2025-02-10</td>
                                            <td>2025-03-12</td>
                                            <td><span class="task-status status-approved">已完成</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 标准化试点项目页面 -->
            <div class="content page-content" id="pilot-project">
                <div class="page-title">
                    <h2>标准化试点项目</h2>
                    <button class="btn btn-success"><i class="fas fa-plus"></i> 新建项目</button>
                </div>
                
                <div class="tabs">
                    <div class="tab active" data-tab="provincial">省级试点项目</div>
                    <div class="tab" data-tab="national">国家级试点项目</div>
                </div>
                
                <div class="tab-content active" data-tab="provincial">
                    <div class="card">
                        <div class="card-header">
                            <h3>省级标准化试点项目列表</h3>
                            <div class="action-buttons">
                                <button class="btn btn-outline"><i class="fas fa-filter"></i> 筛选</button>
                                <button class="btn btn-outline"><i class="fas fa-download"></i> 导出</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>项目编号</th>
                                            <th>项目名称</th>
                                            <th>承担单位</th>
                                            <th>所属领域</th>
                                            <th>立项日期</th>
                                            <th>当前阶段</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>JS202501001</td>
                                            <td>智能制造标准化试点</td>
                                            <td>苏州工业园区</td>
                                            <td>工业</td>
                                            <td>2025-01-15</td>
                                            <td><span class="task-status status-in-progress">项目实施</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>JS202501002</td>
                                            <td>智慧农业标准化试点</td>
                                            <td>淮安市农业农村局</td>
                                            <td>农业</td>
                                            <td>2025-01-20</td>
                                            <td><span class="task-status status-pending">考核验收</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>JS202412015</td>
                                            <td>政务服务标准化试点</td>
                                            <td>南京市政务办</td>
                                            <td>服务业</td>
                                            <td>2024-12-10</td>
                                            <td><span class="task-status status-approved">已完成</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="tab-content" data-tab="national">
                    <div class="card">
                        <div class="card-header">
                            <h3>国家级标准化试点项目列表</h3>
                        </div>
                        <div class="card-body">
                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>项目编号</th>
                                            <th>项目名称</th>
                                            <th>承担单位</th>
                                            <th>推荐单位</th>
                                            <th>申报日期</th>
                                            <th>当前状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>GJ202503001</td>
                                            <td>国家级高端装备制造标准化试点</td>
                                            <td>徐工集团</td>
                                            <td>江苏省市场监管局</td>
                                            <td>2025-03-10</td>
                                            <td><span class="task-status status-pending">资格预审</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>GJ202502001</td>
                                            <td>国家级新材料标准化试点</td>
                                            <td>南京新材料研究院</td>
                                            <td>江苏省市场监管局</td>
                                            <td>2025-02-15</td>
                                            <td><span class="task-status status-in-progress">专家审核</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 标准化委员会页面 -->
            <div class="content page-content" id="committee">
                <div class="page-title">
                    <h2>标准化委员会管理</h2>
                    <button class="btn btn-success"><i class="fas fa-plus"></i> 新建委员会</button>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3>标准化委员会列表</h3>
                        <div class="action-buttons">
                            <button class="btn btn-outline"><i class="fas fa-filter"></i> 筛选</button>
                            <button class="btn btn-outline"><i class="fas fa-download"></i> 导出</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>委员会编号</th>
                                        <th>委员会名称</th>
                                        <th>所属领域</th>
                                        <th>秘书处承担单位</th>
                                        <th>成立日期</th>
                                        <th>委员人数</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>TC202001</td>
                                        <td>江苏省智能制造标准化技术委员会</td>
                                        <td>工业</td>
                                        <td>江苏省工业和信息化厅</td>
                                        <td>2020-05-10</td>
                                        <td>25</td>
                                        <td><span class="task-status status-approved">正常</span></td>
                                        <td class="action-buttons">
                                            <button class="action-btn action-view">查看</button>
                                            <button class="action-btn action-edit">编辑</button>
                                            <button class="action-btn action-delete">删除</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>TC202102</td>
                                        <td>江苏省绿色建筑标准化技术委员会</td>
                                        <td>建筑</td>
                                        <td>江苏省住房和城乡建设厅</td>
                                        <td>2021-08-15</td>
                                        <td>18</td>
                                        <td><span class="task-status status-approved">正常</span></td>
                                        <td class="action-buttons">
                                            <button class="action-btn action-view">查看</button>
                                            <button class="action-btn action-edit">编辑</button>
                                            <button class="action-btn action-delete">删除</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>TC202303</td>
                                        <td>江苏省数字乡村标准化技术委员会</td>
                                        <td>农业</td>
                                        <td>江苏省农业农村厅</td>
                                        <td>2023-03-20</td>
                                        <td>22</td>
                                        <td><span class="task-status status-pending">筹建中</span></td>
                                        <td class="action-buttons">
                                            <button class="action-btn action-view">查看</button>
                                            <button class="action-btn action-edit">编辑</button>
                                            <button class="action-btn action-delete">删除</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="pagination">
                            <div class="page-item active">1</div>
                            <div class="page-item">2</div>
                            <div class="page-item">3</div>
                            <div class="page-item">...</div>
                            <div class="page-item">10</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 专家管理页面 -->
            <div class="content page-content" id="expert">
                <div class="page-title">
                    <h2>专家管理</h2>
                    <button class="btn btn-success"><i class="fas fa-plus"></i> 添加专家</button>
                </div>
                
                <div class="tabs">
                    <div class="tab active" data-tab="expert-list">专家列表</div>
                    <div class="tab" data-tab="expert-application">专家申请</div>
                    <div class="tab" data-tab="task-assignment">任务分配</div>
                </div>
                
                <div class="tab-content active" data-tab="expert-list">
                    <div class="card">
                        <div class="card-header">
                            <h3>专家信息列表</h3>
                            <div class="action-buttons">
                                <button class="btn btn-outline"><i class="fas fa-filter"></i> 筛选</button>
                                <button class="btn btn-outline"><i class="fas fa-download"></i> 导出</button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>专家编号</th>
                                            <th>姓名</th>
                                            <th>性别</th>
                                            <th>专业领域</th>
                                            <th>工作单位</th>
                                            <th>职称</th>
                                            <th>类型</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>ZJ2021001</td>
                                            <td>张明</td>
                                            <td>男</td>
                                            <td>智能制造</td>
                                            <td>东南大学</td>
                                            <td>教授</td>
                                            <td>常驻专家</td>
                                            <td><span class="task-status status-approved">在库</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                                <button class="action-btn action-delete">删除</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>ZJ2021002</td>
                                            <td>李红</td>
                                            <td>女</td>
                                            <td>信息技术</td>
                                            <td>南京大学</td>
                                            <td>副教授</td>
                                            <td>常驻专家</td>
                                            <td><span class="task-status status-approved">在库</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                                <button class="action-btn action-delete">删除</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>ZJ2023001</td>
                                            <td>王强</td>
                                            <td>男</td>
                                            <td>新材料</td>
                                            <td>苏州大学</td>
                                            <td>研究员</td>
                                            <td>临时专家</td>
                                            <td><span class="task-status status-pending">审核中</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                                <button class="action-btn action-delete">删除</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="tab-content" data-tab="expert-application">
                    <div class="card">
                        <div class="card-header">
                            <h3>专家申请列表</h3>
                        </div>
                        <div class="card-body">
                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>申请编号</th>
                                            <th>申请人</th>
                                            <th>申请日期</th>
                                            <th>专业领域</th>
                                            <th>申请类型</th>
                                            <th>当前状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>SQ202503001</td>
                                            <td>陈华</td>
                                            <td>2025-03-25</td>
                                            <td>生物医药</td>
                                            <td>常驻专家</td>
                                            <td><span class="task-status status-pending">待审核</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">审核</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>SQ202503002</td>
                                            <td>刘伟</td>
                                            <td>2025-03-26</td>
                                            <td>环境保护</td>
                                            <td>临时专家</td>
                                            <td><span class="task-status status-pending">待审核</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">审核</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 数据统计页面 -->
            <div class="content page-content" id="statistics">
                <div class="page-title">
                    <h2>数据统计</h2>
                    <div class="action-buttons">
                        <button class="btn btn-outline"><i class="fas fa-calendar"></i> 选择时间范围</button>
                        <button class="btn btn-outline"><i class="fas fa-download"></i> 导出报表</button>
                    </div>
                </div>
                
                <div class="card-grid">
                    <div class="card">
                        <div class="card-header">
                            <h3>地方标准统计</h3>
                            <i class="fas fa-chart-bar"></i>
                        </div>
                        <div class="card-body">
                            <div class="stat-number">156</div>
                            <div class="stat-desc">现行有效地方标准</div>
                            <div style="margin-top: 15px;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <span>立项申报</span>
                                    <span>23</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <span>征求意见</span>
                                    <span>15</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <span>送审报批</span>
                                    <span>8</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h3>试点项目统计</h3>
                            <i class="fas fa-project-diagram"></i>
                        </div>
                        <div class="card-body">
                            <div class="stat-number">42</div>
                            <div class="stat-desc">在试点项目总数</div>
                            <div style="margin-top: 15px;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <span>省级项目</span>
                                    <span>35</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <span>国家级项目</span>
                                    <span>7</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <span>已完成项目</span>
                                    <span>18</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h3>专家统计</h3>
                            <i class="fas fa-user-tie"></i>
                        </div>
                        <div class="card-body">
                            <div class="stat-number">128</div>
                            <div class="stat-desc">在库专家总数</div>
                            <div style="margin-top: 15px;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <span>常驻专家</span>
                                    <span>96</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <span>临时专家</span>
                                    <span>32</span>
                                </div>
                                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                    <span>本月新增</span>
                                    <span>5</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <h3>申报趋势分析</h3>
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="card-body">
                        <div style="height: 300px; background-color: #f8f9fa; display: flex; align-items: center; justify-content: center; border-radius: 4px;">
                            <p>图表区域 - 申报趋势分析图</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 系统管理页面 -->
            <div class="content page-content" id="system">
                <div class="page-title">
                    <h2>系统管理</h2>
                </div>
                
                <div class="tabs">
                    <div class="tab active" data-tab="user-management">用户管理</div>
                    <div class="tab" data-tab="role-management">角色权限</div>
                    <div class="tab" data-tab="system-config">系统配置</div>
                    <div class="tab" data-tab="log-management">日志管理</div>
                </div>
                
                <div class="tab-content active" data-tab="user-management">
                    <div class="card">
                        <div class="card-header">
                            <h3>用户列表</h3>
                            <button class="btn btn-success"><i class="fas fa-plus"></i> 添加用户</button>
                        </div>
                        <div class="card-body">
                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>用户ID</th>
                                            <th>用户名</th>
                                            <th>所属部门</th>
                                            <th>角色</th>
                                            <th>最后登录时间</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>U2021001</td>
                                            <td>admin</td>
                                            <td>省市场监管局</td>
                                            <td>系统管理员</td>
                                            <td>2025-03-30 15:23:12</td>
                                            <td><span class="task-status status-approved">正常</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                                <button class="action-btn action-delete">删除</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>U2021002</td>
                                            <td>zhangsan</td>
                                            <td>南京市市场监管局</td>
                                            <td>市级管理员</td>
                                            <td>2025-03-29 09:45:33</td>
                                            <td><span class="task-status status-approved">正常</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                                <button class="action-btn action-delete">删除</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>U2022005</td>
                                            <td>lisi</td>
                                            <td>江苏省工信厅</td>
                                            <td>行业主管部门</td>
                                            <td>2025-03-28 14:12:07</td>
                                            <td><span class="task-status status-approved">正常</span></td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                                <button class="action-btn action-delete">删除</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="tab-content" data-tab="role-management">
                    <div class="card">
                        <div class="card-header">
                            <h3>角色权限管理</h3>
                            <button class="btn btn-success"><i class="fas fa-plus"></i> 添加角色</button>
                        </div>
                        <div class="card-body">
                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>角色ID</th>
                                            <th>角色名称</th>
                                            <th>角色描述</th>
                                            <th>用户数量</th>
                                            <th>创建时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>R001</td>
                                            <td>系统管理员</td>
                                            <td>拥有系统所有权限</td>
                                            <td>3</td>
                                            <td>2025-01-10</td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                                <button class="action-btn action-delete">删除</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>R002</td>
                                            <td>省级管理员</td>
                                            <td>管理省级标准化业务</td>
                                            <td>12</td>
                                            <td>2025-01-10</td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                                <button class="action-btn action-delete">删除</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>R003</td>
                                            <td>市级管理员</td>
                                            <td>管理市级标准化业务</td>
                                            <td>45</td>
                                            <td>2025-01-10</td>
                                            <td class="action-buttons">
                                                <button class="action-btn action-view">查看</button>
                                                <button class="action-btn action-edit">编辑</button>
                                                <button class="action-btn action-delete">删除</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 页面导航功能
        document.querySelectorAll('.nav-item').forEach(item => {
            item.addEventListener('click', function() {
                const pageId = this.dataset.page;
                
                // 更新导航激活状态
                document.querySelectorAll('.nav-item').forEach(nav => {
                    nav.classList.remove('active');
                });
                this.classList.add('active');
                
                // 显示对应页面内容
                document.querySelectorAll('.page-content').forEach(page => {
                    page.classList.remove('active');
                });
                document.getElementById(pageId).classList.add('active');
            });
        });
        
        // 模块卡片点击事件
        document.querySelectorAll('.module-card').forEach(card => {
            card.addEventListener('click', function() {
                const pageId = this.dataset.page;
                
                // 更新导航激活状态
                document.querySelectorAll('.nav-item').forEach(nav => {
                    nav.classList.remove('active');
                    if (nav.dataset.page === pageId) {
                        nav.classList.add('active');
                    }
                });
                
                // 显示对应页面内容
                document.querySelectorAll('.page-content').forEach(page => {
                    page.classList.remove('active');
                });
                document.getElementById(pageId).classList.add('active');
            });
        });
        
        // 选项卡切换功能
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', function() {
                const tabId = this.dataset.tab;
                const parent = this.closest('.page-content');
                
                // 更新选项卡激活状态
                parent.querySelectorAll('.tab').forEach(t => {
                    t.classList.remove('active');
                });
                this.classList.add('active');
                
                // 显示对应选项卡内容
                parent.querySelectorAll('.tab-content').forEach(content => {
                    content.classList.remove('active');
                    if (content.dataset.tab === tabId) {
                        content.classList.add('active');
                    }
                });
            });
        });
        
        // 操作按钮点击事件
        document.querySelectorAll('.action-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const action = this.textContent;
                const row = this.closest('tr');
                const id = row.cells[0].textContent;
                const name = row.cells[1].textContent;
                
                alert(`执行操作: ${action} - 项目: ${name} (${id})`);
            });
        });
        
        // 表单提交示例
        document.querySelectorAll('.btn-success').forEach(btn => {
            if (btn.textContent.includes('新建') || btn.textContent.includes('添加')) {
                btn.addEventListener('click', function() {
                    const pageTitle = this.closest('.page-title').querySelector('h2').textContent;
                    alert(`准备在"${pageTitle}"模块中创建新记录`);
                });
            }
        });
    </script>
</body>
</html>